<template>
  <el-container>
      <!-- 6场半全场比赛列表 -->
      <el-table :data="matches"
                style="width: 100%;"
                :cell-style="{ textAlign: 'center' }"
                height="500"
                :header-cell-style="{'background-color':'#eeeeee','border-right': '1px solid #CACACA','text-align':'center','color':'#000'}"
               >
        <el-table-column  label="场次" width="80">
          <template #default="scope">
            <span>{{scope.row.number}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="赛事" width="80" >
          <template #default="scope">
            <span>{{scope.row.matchs}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="开赛时间" width="110" >
          <template #default="scope">
            <span>{{scope.row.openTime}}</span>
          </template>
        </el-table-column>

        <el-table-column  width="300">
          <template #header>
            <span>主队</span>
            <span class="vs">VS</span>
            <span >客队</span>
          </template>
            <template #default="scope">
              <span class="team">{{scope.row.homeTeam}}</span>
              <span class="vs">VS</span>
              <span class="team">{{scope.row.visitingTeam}}</span>
            </template>
        </el-table-column>
        <el-table-column label="半全场" width="70" >
          <template #default="scope">
            <p class="rangn">
              半场
            </p>
            <p class="rang0">
              全场
            </p>
          </template>
        </el-table-column>
        <el-table-column width="210">
          <template #header>
            <div class="select-item-head">
              <span>胜(3)</span>
              <span>平(1)</span>
              <span>负(0)</span>
            </div>

          </template>
          <template #default="scope">
            <div class="betbtn-row" v-if="scope.row.s">
              <p class="betbtn" :class="scope.row.s.x?'betbtn-on':''" @click="onSelect(scope.row,'s')">
                3</p>
              <p class="betbtn" :class="scope.row.p.x?'betbtn-on':''" @click="onSelect(scope.row,'p')">
                1</p>
              <p class="betbtn" :class="scope.row.f.x?'betbtn-on':''" @click="onSelect(scope.row,'f')">
                0</p>
            </div>
            <div class="betbtn-row" v-if="scope.row.s">
              <p class="betbtn" :class="scope.row.s.x?'betbtn-on':''" @click="onSelect(scope.row,'s')">
                3</p>
              <p class="betbtn" :class="scope.row.p.x?'betbtn-on':''" @click="onSelect(scope.row,'p')">
                1</p>
              <p class="betbtn" :class="scope.row.f.x?'betbtn-on':''" @click="onSelect(scope.row,'f')">
                0</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平均欧赔"  width="150">
          <template #header>
            <div>
              <span style="color: red;font-size: 18px">&#8593;</span>
              <span style="color: #00CC00;font-size: 18px">&#8595;</span>
              平均欧赔
            </div>
          </template>
          <template #default="scope">
            <div class="betbtn-row">
              <span>{{scope.row.rs.v}}</span>
              <span class="oupei">{{scope.row.rp.v}}</span>
              <span>{{scope.row.rf.v}}</span>
            </div>
           </template>
        </el-table-column>
        <el-table-column label="数据">
          <template #default="scope">
            <div class="betbtn-row">
              <span style="color: red; ">分析</span>
              <span style="color: green;margin-left: 5px">推荐</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    <!-- 底部操作栏 -->
    <el-footer class="fixed-footer">
      <div class="select-div">已选<span>{{selectedValues.selectMatches.length}}</span>场</div>
      <div class="select-in">
        <div class="guo-guan">
          <text>过关方式：</text>
          <div v-if="selectedValues.selectMatches.length>8" class="guo-guan-checkbox">
            <!-- 动态生成 el-checkbox -->
            <el-checkbox
                v-for="item in checkboxOptions"
                :key="item.value"
                v-model="selectedValues.guoGuan"
                :label="item.value"
                class="checkbox-item"
            >
              {{ item.label }}
            </el-checkbox>
          </div>
          <span v-else class="guo-guan-red">请至少选择9场比赛</span>
        </div>
        <div>倍数：
          <el-input-number v-model="selectedValues.bei" size="small" :min="1" :max="50" class="input-num"/>倍
          <span class="gou-money">投注金额：<text>{{gou_money}}元</text></span>
          <span>预计奖金：<text class="jiang">{{gou_jiang}}元</text></span>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue';
import {getMatchs} from "@/api/sportteryFootball";
// 比赛数据
const matches = ref([]);
// 复选框选项数据
const checkboxOptions = ref([]);
// 选中的购买的场次,包含选择的比赛列表，过关方式，投注倍数
const selectedValues = reactive({
  selectMatches:[],//选择的比赛
  guoGuan:[],//过关方式
  bei:1,//倍数
});
// 购买金额
const gou_money = ref(0);
// 预计中奖金额
const gou_jiang = ref(0);

onMounted(async () => {
  const { data } = await getMatchs();
  matches.value = data.data;
});

// 选择比赛按钮点击事件
const onSelect = (item,t) => {
  if(item[t]["x"]){
    item[t]["x"] = 0;
  }else{
    item[t]["x"] = 1;
  }
};

// 监听 matches
watch(
    matches,
    (newValue, oldValue) => {
      // 找到选择的
      for(const m of newValue){
        if(m["s"]){
          if(m["s"].x||m["p"].x||m["f"].x||m["rs"].x||m["rp"].x||m["rf"].x){
            selectedValues.selectMatches = selectedValues.selectMatches.filter(item => item.id !== m.id);
            //放到选择列表
            selectedValues.selectMatches.push(m);
          }
        }else if(m["rs"]){
          if(m["rs"].x||m["rp"].x||m["rf"].x){
            selectedValues.selectMatches = selectedValues.selectMatches.filter(item => item.id !== m.id);
            //放到选择列表
            selectedValues.selectMatches.push(m);
          }
        }
      }
      //判断可以选择的串子
      const num = selectedValues.selectMatches.length;
      if(num === 9){
          const c = { label: '任九场', value: 9 };
            checkboxOptions.value.push(c);
      }else if(num === 14){
        const c = { label: '14场', value: 14 };
          checkboxOptions.value.push(c);
      }
    },
    { deep: true } // 深度监听
);
// 监听 选择的投注,计算金额及奖金，可以到后台计算，也可以放在这里计算
watch(
    selectedValues,
    (newValue, oldValue) => {
        //我们在这里开始计算奖金和购买金额
        gou_jiang.value = 5000000;
        gou_money.value = 100;

    },
    { deep: true } // 深度监听
    );


// 确认选择按钮点击事件
const onConfirm = () => {
};
</script>

<style scoped>
.fixed-footer {
  position: sticky; /* 固定位置 */
  bottom: 0; /* 固定最低位置 */
  height: 80px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  display: flex;
  justify-content: start;
}
.betbtn {
  cursor: pointer;
  display: block;
  margin-left: -1px;
  height: 34px;
  line-height: 34px;
  border: 1px solid #B4CCE8;
  text-align: center;
  font-weight: bold;
  color: #444;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-position: 0 -50px;
  font-size: 12px;
  background-color: #e8f3fa;
}
.betbtn-row {
  padding-left: 1px;
  width: 100.5%;
}
.betbtn-row .betbtn {
  float: left;
  width: 60px;
}
.bet-spfrq-main .bet-tb .betbtn, .bet-spf-main .bet-tb .betbtn {
  width: 104px;
}

.betbtn-on {
  color: #fff;
  background: #1F7DDF;
}
.rang0{
  color:red; text-align: right;line-height: 40px;
}
.rangn{
  text-align: right;line-height: 40px;
}
.vs {
  margin-right: 10px;margin-left: 10px;
}
.team{
  color: blueviolet;
}
.oupei{
  color: red;margin-right: 12px;margin-left: 12px;
}
.select-div{
  margin: 10px 10px;padding: 10px 20px;border: 1px solid #B4CCE8;
}
.select-div span{
  color:red;font-size: 17px;padding: 5px 5px;
}
.select-in{
  border-left: 1px solid #B4CCE8;margin: 5px 5px;padding: 5px 20px;
}
.input-num{
  margin-right: 3px;width: 100px;
}
.gou-money{
  padding-left: 10px;margin-right: 10px;
}
.gou-money text{
  font-size: 18px;
  color:red;
}
.jiang{
  color:red;
}
.guo-guan{
  display: flex;
  justify-content: start;
  height: 40px;
  text-align: center;
}
.guo-guan text,span{
  padding-top: 7px;
}
.guo-guan-red{
  color:red;
}
.select-item-head{
  display: flex;
  justify-content: start;
 }
.select-item-head span{
  padding-left: 17px;
  padding-right: 5px;
}
.guo-guan-checkbox{
  margin-bottom: 5px;
}
.checkbox-item{
  width: 40px;
}
.el-table .el-table__cell .cell{
  padding: 0;
}
</style>